<template>
	<view class="player-container">
		<text v-if="name" class="name">
			<text>{{name}}</text>
		</text>

		<view v-if="name" class="progress">
			<text>{{getTimeStr(currentTime)}}</text>
			<slider active-color="#FF7F27" :block-size="12" :value="currentTime" @change="onSeekClick"
				style="flex: 1; width: 0;" :max="duration"></slider>
			<text>{{getTimeStr(duration)}}</text>
		</view>

		<view class="player">
			<view @tap="emits('onLastClick')" hover-class="btn-hover" class="btn">
				<image src="../../static/icon_previous.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
			</view>
			<view @tap="emits(paused?'onPlayClick':'onPauseClick')" hover-class="play-hover" class="play">
				<image style="width: 24px; height: 24px;" v-if="paused" src="../../static/icon_play.png"></image>
				<image style="width: 24px; height: 24px;" v-else src="../../static/icon_pause.png"></image>
			</view>
			<view @tap="emits('onNextClick')" hover-class="btn-hover" class="btn">
				<image src="../../static/icon_next.png" mode="aspectFit" style="width: 24px; height: 24px;"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from "vue";
	const props = defineProps({
		currentTime: {
			type: Number,
			default: function() {
				return 0;
			}
		}, // 当前音频的播放位置（单位：s）
		duration: {
			type: Number,
			default: function() {
				return 100;
			}
		}, // 当前音频时长，单位：秒
		name: String,
		paused: {
			type: Boolean,
			default: function() {
				return true;
			}
		}
	})

	let emits = defineEmits([
		'onPlayClick', 'onPauseClick', 'onNextClick', 'onLastClick', 'onSeekClick'
	])

	function getTimeStr(time) {
		if (isNaN(time)) {
			return '-'
		} else {
			let minute = Math.floor(time / 60) + "";
			if (minute.length == 1) {
				minute = '0' + minute;
			}
			let second = Math.floor(time % 60) + "";
			if (second.length == 1) {
				second = '0' + second;
			}
			return minute + ":" + second;
		}
	}

	function onSeekClick(event) {
		console.log("value = ", event.detail.value)
		emits('onSeekClick', event.detail.value)
	}
</script>

<style lang="scss" scoped>
	.player-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		min-height: 58px;
		background: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		box-sizing: border-box;
		row-gap: 12px;
		flex-direction: column;
		padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) 12px;

		.name {
			font-size: 18px;
			color: #222222;
			padding: 0 12px;
			text-align: center;
		}

		.progress {
			display: flex;
			flex-direction: row;
			column-gap: 6px;
			padding: 0 12px;
			font-size: 12px;
			color: $uni-text-color-grey;
			align-items: center;
		}

		.player {
			display: flex;
			flex-direction: row;
			column-gap: 24px;
			align-items: center;
			justify-content: center;

			.play {
				width: 64px;
				height: 64px;
				background: #FF7F27;
				border-radius: 32px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}

			.play-hover {
				background: #FF7F2799;
			}

			.btn {
				width: 64px;
				height: 64px;
				border-radius: 32px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.btn-hover {
				background: $uni-bg-color-hover;
			}
		}
	}
</style>
